<template>
	<div id="rt_bmot_bottom_echarts" :style="{width: '100%', height: '178px'}"></div>
</template>
<script>
	import * as echarts from 'echarts';
	import {object} from 'vue-types';
	export default {
		name: 'graphicEcharts',
		props: {
			graphicData: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {};
		},
		watch: {
			graphicData: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					// this.initCharts(newVal);
					setTimeout(() => {
						this.initCharts(newVal);
					}, 300);
				},
			},
		},
		created() {
			// setTimeout(() => {
			// 	this.initCharts();
			// }, 300);
		},

		methods: {
			initCharts(newVal) {
				let xAxisdata = newVal.highWarnList.map((item) => {
					return item.localdate;
				});

				let seriesdata1 = newVal.highWarnList.map((item) => {
					return item.num;
				});
				let seriesdata2 = newVal.midWarnList.map((item) => {
					return item.num;
				});
				let seriesdata3 = newVal.lowWarnList.map((item) => {
					return item.num;
				});

				var myCharts1 = echarts.init(document.getElementById('rt_bmot_bottom_echarts'));
				// 绘制图表
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#57617B',
							},
						},
					},
					legend: {
						icon: 'rect',
						itemWidth: 14,
						itemHeight: 5,
						itemGap: 13,
						data: ['高', '中', '低'],
						right: '1%',
						textStyle: {
							fontSize: 12,
							color: '#F1F1F3',
						},
					},
					grid: {
						top: '5%',
						left: '1px',
						right: '1px',
						bottom: '8%',
						containLabel: true,
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							axisLine: {
								lineStyle: {
									color: '#57617B',
								},
							},
							data: xAxisdata,
						},
					],
					yAxis: [
						{
							type: 'value',
							axisTick: {
								show: false,
							},
							axisLine: {
								lineStyle: {
									color: '#57617B',
								},
							},
							axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 14,
								},
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#57617B',
								},
							},
						},
					],
					series: [
						{
							name: '高',
							type: 'line',
							smooth: true,
							lineStyle: {
								normal: {
									width: 1,
								},
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[
											{
												offset: 0,
												color: 'rgba(137, 189, 27, 0.3)',
											},
											{
												offset: 0.8,
												color: 'rgba(137, 189, 27, 0)',
											},
										],
										false
									),
									shadowColor: 'rgba(0, 0, 0, 0.1)',
									shadowBlur: 10,
								},
							},
							itemStyle: {
								normal: {
									color: 'rgb(137,189,27)',
								},
							},
							data: seriesdata1,
						},
						{
							name: '中',
							type: 'line',
							smooth: true,
							lineStyle: {
								normal: {
									width: 1,
								},
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[
											{
												offset: 0,
												color: 'rgba(0, 136, 212, 0.3)',
											},
											{
												offset: 0.8,
												color: 'rgba(0, 136, 212, 0)',
											},
										],
										false
									),
									shadowColor: 'rgba(0, 0, 0, 0.1)',
									shadowBlur: 10,
								},
							},
							itemStyle: {
								normal: {
									color: 'rgb(0,136,212)',
								},
							},
							data: seriesdata2,
						},
						{
							name: '低',
							type: 'line',
							smooth: true,
							lineStyle: {
								normal: {
									width: 1,
								},
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[
											{
												offset: 0,
												color: 'rgba(219, 50, 51, 0.3)',
											},
											{
												offset: 0.8,
												color: 'rgba(219, 50, 51, 0)',
											},
										],
										false
									),
									shadowColor: 'rgba(0, 0, 0, 0.1)',
									shadowBlur: 10,
								},
							},
							itemStyle: {
								normal: {
									color: 'rgb(219,50,51)',
								},
							},
							data: seriesdata3,
						},
					],
				};
				myCharts1.setOption(option);
				myCharts1.resize();
			},
		},
	};
</script>
